<template>
	<view>
		<view class="wrap">
			<u-swiper :list="swiperList" height="600" mode="number"></u-swiper>
		</view>
		<!-- 标题 -->
		<view class="title">
			<view class="title_h">{{data.product.subTitle}}</view>
			<text class="title_span">{{data.product.name}}</text>
		</view>
		<view class="tui-basic-info tui-mtop tui-radius-all">
			<view class="tui-list-cell" @click="coupon">
				<view class="tui-bold tui-cell-title">优惠劵</view>
				<view class="tui-selected-box">立即领取</view>
				<view class="tui-ml-auto">
					<tui-icon name="more-fill" :size="20" color="#666"></tui-icon>
				</view>
			</view>
			<view class="tui-list-cell" @click="showPopup">
				<view class="tui-bold tui-cell-title">已选</view>
				<view class="tui-selected-box">{{data.product.name}}，可选服务</view>
				<view class="tui-ml-auto">
					<tui-icon name="more-fill" :size="20" color="#666"></tui-icon>
				</view>
			</view>
			<view class="tui-list-cell tui-last">
				<view class="tui-bold tui-cell-title">运费</view>
				<view class="tui-selected-box">免运费</view>
			</view>
			<view class="tui-guarantee">
				<view class="tui-guarantee-item">
					<tui-icon name="circle-selected" :size="14" color="#999"></tui-icon>
					<text class="tui-pl">7天无理由退货</text>
				</view>
				<view class="tui-guarantee-item">
					<tui-icon name="circle-selected" :size="14" color="#999"></tui-icon>
					<text class="tui-pl">闪电发货</text>
				</view>
				<view class="tui-guarantee-item">
					<tui-icon name="circle-selected" :size="14" color="#999"></tui-icon>
					<text class="tui-pl">极速审核</text>
				</view>
			</view>
		</view>
		<!-- 评论 -->
		<view class="comment">
			<u-cell-item title="评论" :border-bottom="false" @click="evaluate()"></u-cell-item>
			<view class="comment_item" v-for="item in evaluateList" :key="item.id">
				<view class="head">
					<view class="head_content">
						<u-avatar :src="item.memberIcon" size="mini"></u-avatar>
						<text class="head_content_text">{{item.memberNickName}}</text>
						<u-rate :count="count" v-model="item.star" :gutter="5" disabled></u-rate>
					</view>
					<view class="head_date">{{item.createTime}}</view>
				</view>
				<view class="nav">
					<view class="nav_title"> {{item.content}}</view>
					<view class="nav_img" v-if="item.pics!=''&&item.pics!=null">
						<u-image class="nav_img_image" width="200rpx" height="200rpx" v-for="(pic,i) in item.pics" :key="i" :src="pic"></u-image>
					</view>
				</view>
			</view>
			<u-button v-if="evaluateList.length!=0" class="more" @click="evaluate()" size="mini">查看更多</u-button>
			<u-button v-else class="more" size="mini">暂无评价</u-button>
		</view>
		<view class="detail">
			<u-parse :html="imgHtml"></u-parse>
		</view>

		<view class="navigation">
			<view class="left">
				<!-- <view class="item">
					<u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">客服</view>
				</view>
				-->
				<view class="item" @click="shareShow()">
					<u-icon name="zhuanfa" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">分享</view>
					<!-- <button class="text u-line-1 share-btn" open-type="share">立即分享</button> -->
				</view>
				<view class="item" @click="collection()">
					<u-icon name="heart" v-show="!collections" :size="40" :color="$u.color['contentColor']"></u-icon>
					<u-icon name="heart" v-show="collections" :size="40" color="#fa3534"></u-icon>
					<view class="text u-line-1">收藏</view>
				</view>
				<view class="item car" @click="toCar()">
					<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">购物车</view>
				</view>
			</view>
			<view class="right" v-if="!disabled">
				<view class="cart btn u-line-1" @click="showPopup()">加入购物车</view>
				<view class="buy btn u-line-1" @click="showPopup()">立即购买</view>
			</view>
			<view class="right" v-else>
				<view class="cart btn u-line-1">加入购物车</view>
				<view class="buy btn u-line-1">暂无商品</view>
			</view>
		</view>

		<!--底部选择层-->
		<tui-bottom-popup :show="popupShow" @close="hidePopup">
			<view class="tui-popup-box">
				<view class="tui-product-box tui-padding">
					<image :src="skuStoc.pic" class="tui-popup-img"></image>
					<view class="tui-popup-price">
						<view class="tui-amount tui-bold">￥{{skuStoc.price}}</view>
						<view class="tui-number">{{data.product.name}}</view>
					</view>
				</view>
				<scroll-view scroll-y class="tui-popup-scroll">
					<view class="tui-scrollview-box">
						<view v-for="items in productAttributeList" :key="items.id">
							<view class="tui-bold tui-attr-title">{{items.name}}</view>
							<view class="tui-attr-box">
								<view class="tui-attr-item " v-for="(item,j) in items.inputListArr" :key="j" :class="items.inputListIndex==j?'tui-attr-active':''"
								 @click="switchs(items,j)">{{item}}</view>
							</view>
						</view>
						<view class="tui-number-box tui-bold tui-attr-title">
							<view class="tui-attr-title">数量</view>
							<tui-numberbox :max="99" :min="1" :value="goodsNumber" @change="change"></tui-numberbox>
						</view>
					</view>
				</scroll-view>
				<view class="tui-operation tui-operation-right tui-right-flex tui-popup-btn">

					<view class="tui-flex-1">
						<tui-button height="72rpx" :size="28" type="danger" shape="circle" @click="addCart()" :disabled="disabled">加入购物车</tui-button>
					</view>
					<view class="tui-flex-1">
						<tui-button height="72rpx" :size="28" type="warning" shape="circle" @click="submit" :disabled="disabled">立即购买</tui-button>
					</view>
				</view>
				<view class="tui-right">
					<tui-icon name="close-fill" color="#999" :size="20" @click="hidePopup"></tui-icon>
				</view>
			</view>
		</tui-bottom-popup>
		<!--底部选择层-->

		<!--toast提示-->
		<tui-toast ref="toast"></tui-toast>


		<!-- 分享 -->
		<u-popup background-color="rgb(240, 240, 240);" v-model="share_show" mode="bottom"  closeable="true"
		 duration="10">
			<!-- <view class="share">
				<button open-type='share' class="share_li">
					<image class="share_li_img" src="/static/img/share_wechat.png" mode=""></image>
					<text class="share_li_text">微信好友</text>
				</button>
				<button @click="goodsPoster" class="share_li">
					<image class="share_li_img" src="/static/img/ic_weixin.png" mode=""></image>
					<text class="share_li_text">保存图片</text>
				</button>
				
			</view> -->
			<goodsPoster ref="goodsPoster" :pid="id" @getId="getId" :open="opens()" />
		</u-popup>

		<u-no-network tips="哎呀，网络信号丢失"></u-no-network>
		<failTimeout v-show="failTimeout"></failTimeout>
	</view>
</template>

<script>
	import PmsPortalProductController from '../../api/PmsPortalProductController.js'
	import MemberCollectionController from '../../api/MemberCollectionController.js'
	import PmsPortalCommentController from '../../api/PmsPortalCommentController.js'
	import OmsCartItemController from '../../api/OmsCartItemController.js'
	import MemberReadHistoryController from '../../api/MemberReadHistoryController.js'
	import Cookies from '../../utils/Cookies.js'
	import goodsPoster from '../../components/goodsPoster.vue'
	import {
		formatDate
	} from '../../utils/date.js'
	export default {
		components: {
			goodsPoster
		},
		data() {
			return {
				failTimeout: false,
				swiperList: [],
				data: [],
				headPortraittext: '无头像',
				value: 4,
				count: 5,
				imgHtml: '',
				popupShow: false, //底部抽屉
				productAttributeList: [],
				skuStockList: [],
				skuStoc: {},
				collections: false, //是否收藏
				evaluateList: [], //评价
				goodsNumber: 1,
				disabled: false, //库存是否足够
				share_show: false, //分享弹窗显示异常
				id: null,
				dj:true,
			}
		},
		// //分享到朋友圈
		// onShareTimeline(res) {
		// 	let distSource = uni.getStorageSync('distSource');
		// 	if (distSource) {
		// 		return {
		// 			title: '欢迎使用商城',
		// 			type: 0,
		// 			query: 'id=' + distSource,
		// 			summary: "",
		// 			imageUrl: "https://58d.oss-cn-hangzhou.aliyuncs.com/goods/ttg_1596073788000.png"
		// 		}
		// 	}
		// },
		// onShareAppMessage(res) {
		// 	this.shareHide()
		// 	let that = this;
		// 	if (res.from === 'button') {
		// 		// 来自页面内分享按钮
		// 		console.log(res.target)
		// 	}
		// 	return {
		// 		title: that.title,
		// 		path: '/pages/goodsDetails/goodsDetails?id=' + this.data.product.id,
		// 		imageUrl: that.timg
		// 	}
		// },
		onLoad(option) {

			const scene = decodeURIComponent(option.scene)
			if (scene != '' && scene != null && scene != 'undefined') {
				let id = scene.split('=')[1]
				if (id != '' && id != null && id != 'undefined') {
					option.id = id

				}
			}
			this.id = option.id;
			 PmsPortalProductController.detail(option.id).then(res => { //查询商品详情
				if (res.data.code = 200) {
					this.swiperList.push({
							image: res.data.data.product.pic
						})
					res.data.data.product.albumPics.split(',').forEach(e => {
						this.swiperList.push({
							image: e
						})
					})
					
					res.data.data.productAttributeList.forEach(e => {
						let inputListArr = [];
						if (e.inputList != 'undefined' && e.inputList != null && e.inputList != '') {
							e.inputList.split(',').forEach(eindex => {
								inputListArr.push(eindex);
							})
							e.inputListIndex = 0;
						}
						e.inputListArr = inputListArr;

					})

					if (res.data.data.product.stock <= 0) {
						this.disabled = true;
					}

					this.imgHtml = res.data.data.product.detailHtml

					this.data = res.data.data;
					this.productAttributeList = res.data.data.productAttributeList;
					this.skuStockList = res.data.data.skuStockList;
					this.skuStockListSwitch(res.data.data.productAttributeList, res.data.data.skuStockList)


					MemberReadHistoryController.create(
						this.data.product.id,
						this.data.product.name,
						this.data.product.pic,
						this.data.product.price,
						this.data.product.subTitle,
					).then(res => {
						// console.log(res)
					}).catch(err => {
						if (err.errMsg == 'request:fail timeout') {
							this.failTimeout = true
						}
					})
				} else {
					//uni.navigateBack();
				}

			}).catch(err => {
				if (err.errMsg == 'request:fail timeout') {
					this.failTimeout = true
				} else {
					this.$u.toast('没有该商品！');
					setTimeout(() => {
						uni.navigateBack();
					}, 2000)
				}

			})
			 MemberCollectionController.detail(option.id).then(res => { //查询该商品是否收藏
				if (res.data.code == 200) {
					if (res.data.data != null && res.data.data != '' && res.data.data != 'undefined') {
						this.collections = true
					}
				}
			}).catch(err => {
				if (err.errMsg == 'request:fail timeout') {
					this.failTimeout = true
				}
			})
			 PmsPortalCommentController.getByProductId(option.id, 1, 2).then(res => { //评价

				if (res.data.code == 200) {
					this.evaluateList = res.data.data
					this.evaluateList.forEach(e => {
						e.createTime = formatDate(new Date(e.createTime), 'yyyy-MM-dd')
						e.pics = e.pics.split(',')
					})
				}
			}).catch(err => {
				if (err.errMsg == 'request:fail timeout') {
					this.failTimeout = true
				}
			})
		},
		methods: {
			opens(){
				setTimeout(()=>{
					uni.hideLoading();
				},1000)
				
			},
			goodsPoster() {

				uni.navigateTo({
					url: "/pages/goodsPoster/goodsPoster?optionId=" + this.data.product.id
				})
			},
			shareHide(){
				this.share_show = false;
			},
			shareShow() {
				this.share_show = true;
				this.$refs.goodsPoster.onL(this.data)
				uni.showLoading({
					title: '加载中...'
				});
			},
			coupon() {
				
				if(this.dj){
					this.dj=false
					uni.navigateTo({
						url: '/pages/coupon/coupon?productId=' + this.data.product.id
					})
					setTimeout(()=>{
						this.dj=true
					},1000)
				}
				
			},
			hidePopup: function() {
				this.popupShow = false;

			},
			getId(b) {
				b(this.id)
			},
			submit() {
				if (Cookies.isToken()) {
					this.popupShow = false;
					uni.navigateTo({
						url: '/pages/submitOrder/goodsSubmitOrder?skuId=' + this.skuStoc.id + '&productId=' + this.data.product.id +
							'&goodsNumber=' + this.goodsNumber,
					})
				} else {
					Cookies.login()
				}

			},
			showPopup() {
				if (!this.disabled) {
					this.popupShow = true;
				}

			},
			switchs(items, j) {
				items.inputListIndex = j;
				this.skuStockListSwitch(this.productAttributeList, this.skuStockList)
			},
			skuStockListSwitch(productAttributeList, skuStockList) {
				let inputListIndexArr = [];
				productAttributeList.forEach(e => {

					inputListIndexArr.push(e.inputListArr[e.inputListIndex])
				})
				for (let sku in skuStockList) {

					let spdata = JSON.parse(skuStockList[sku].spData);
					let index = 0;
					for (let spi in spdata) {
						for (let inp in inputListIndexArr) {
							if (spdata[spi].value == inputListIndexArr[inp]) {
								index++;
								break;
							}
						}
					}
					if (index == spdata.length) {
						this.skuStoc = skuStockList[sku]
						break;
					}
				}
			},
			evaluate() {
				uni.navigateTo({
					url: '../evaluate/evaluate?productId=' + this.data.product.id,
				})
			},
			collection() { //收藏
				if (!this.collections) {
					MemberCollectionController.add(
						this.data.product.id,
						this.data.product.name,
						this.data.product.pic,
						this.data.product.price,
						this.data.product.subTitle,
					).then(res => {
						console.log(res)
						if (res.data.code == 200) {
							this.collections = true;
						} else if (res.data.code == 401) {
							Cookies.login();
						}
					}).catch(err => {
						console.log(err)
					})
				} else {
					MemberCollectionController.delete(this.data.product.id, ).then(res => {
						if (res.data.data != null && res.data.data != '' && res.data.data != 'undefined') {
							this.collections = false
						}
					}).catch(err => {
						console.log(err)
					})
				}

			},
			addCart() { //加入购物车

				OmsCartItemController.add(
					this.skuStoc.price,
					this.skuStoc.spData,
					this.data.product.brandName,
					this.data.product.productCategoryId,
					this.data.product.id,
					this.data.product.name,
					this.skuStoc.pic,
					this.skuStoc.skuCode,
					this.skuStoc.id,
					this.data.product.productSn,
					this.data.product.subTitle,
					this.goodsNumber
				).then(res => {
					if (res.data.code == 200) {
						this.$refs.toast.show({
							title: "加入成功",
							imgUrl: "/static/img/toast/check-circle.png",
							icon: true
						})
					} else if (res.data.code == 401) {
						this.$refs.toast.show({
							title: "请登录",
							imgUrl: "/static/img/toast/info-circle.png",
							icon: true
						})
					}
				}).catch(err => {
					console.log(err)
				})

				this.hidePopup();
			},
			change(e) { //商品数量
				this.goodsNumber = e.value;
			},
			toCar() { //跳转购物车页面
				uni.navigateTo({
					url: '../cart/goodsCart'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: rgb(240, 240, 240);
	}
</style>
<style lang="scss" scoped>
	button::after {
		border: none;
		background-color: none;
	}

	.share {
		display: flex;
		justify-content: space-between;
	}

	.share .share_li {
		font-size: 30rpx;
		width: 100%;
		padding: 10prx 0;
		margin: 40rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #fff;
	}

	.share .share_li .share_li_img {
		width: 100rpx;
		height: 100rpx;
	}

	.share .share_li .share_li_text {}

	.title {
		background: white;
		padding: 22rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
	}

	.title_h {
		font-size: 35rpx;
		margin-bottom: 15rpx;

	}

	.title_span {
		margin-top: 20rpx;
		font-size: 30rpx;
	}

	.comment {
		background: white;
		padding: 22rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
	}

	.comment .comment_item {
		margin-bottom: 20rpx;
	}

	.comment .head {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.comment .head .head_content {
		display: flex;
		align-items: center;
	}

	.head_content_text {
		max-width: 310rpx;
		margin: 0 10rpx;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/

	}

	.nav {}

	.nav .nav_img {
		display: flex;
		flex-wrap: wrap;
	}

	.nav .nav_title {
		margin: 10rpx 0;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 3;
		/** 显示的行数 **/
	}

	.nav .nav_img .nav_img_image {
		margin: 10rpx 20rpx 0 0;
	}

	.detail {
		margin-top: 20rpx;
	}

	.more {
		display: flex;
		justify-content: center;
		margin: 20rpx;
	}

	.navigation {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		margin-top: 100rpx;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx 0;
		z-index: 800;

		.left {
			display: flex;
			font-size: 20rpx;

			.item {
				margin: 0 30rpx;

				&.car {
					text-align: center;
					position: relative;

					.car-num {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
					}
				}
			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;

			// justify-content: flex-end;
			// margin-right: 10rpx;
			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
			}

			.cart {
				background-color: #ed3f14;
				margin-right: 30rpx;
			}

			.buy {
				background-color: #ff7900;
			}
		}
	}

	/*底部操作栏*/

	.tui-col-7 {
		width: 58.33333333%;
	}

	.tui-col-5 {
		width: 41.66666667%;
	}

	.tui-operation {
		width: 100%;
		height: 100rpx;
		background: rgba(255, 255, 255, 0.98);
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 10;
		bottom: 0;
		left: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}

	.tui-operation::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		border-top: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.tui-operation-left {
		display: flex;
		align-items: center;
	}

	.tui-operation-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
	}

	.tui-operation-text {
		font-size: 22rpx;
		color: #333;
	}

	.tui-opacity {
		opacity: 0.5;
	}

	.tui-scale-small {
		transform: scale(0.9);
		transform-origin: center center;
	}

	.tui-operation-right {
		height: 100rpx;
		padding-top: 0;
	}

	.tui-right {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.tui-right-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-flex-1 {
		flex: 1;
		padding: 16rpx;
	}

	/*底部操作栏*/

	/*底部选择弹层*/

	.tui-popup-class {
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-popup-box {
		position: relative;
		padding: 30rpx 0 100rpx 0;
	}

	.tui-popup-btn {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	/* .tui-popup-btn .tui-btn-class {
		width: 90% !important;
		display: block !important;
		font-size: 28rpx !important;
	} */

	/* .tui-icon-close {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	} */

	.tui-product-box {
		display: flex;
		align-items: flex-end;
		font-size: 24rpx;
		padding-bottom: 30rpx;
	}

	.tui-popup-img {
		height: 200rpx;
		width: 200rpx;
		border-radius: 24rpx;
		display: block;
	}

	.tui-popup-price {
		padding-left: 20rpx;
		padding-bottom: 8rpx;
	}

	.tui-amount {
		color: #ff201f;
		font-size: 36rpx;
	}

	.tui-number {
		font-size: 24rpx;
		line-height: 24rpx;
		padding-top: 12rpx;
		color: #999;
	}

	.tui-popup-scroll {
		height: 600rpx;
		font-size: 26rpx;
	}

	.tui-scrollview-box {
		padding: 0 30rpx 60rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-attr-title {
		padding: 10rpx 0;
		color: #333;
	}

	.tui-attr-box {
		font-size: 0;
		padding: 20rpx 0;

	}

	.tui-attr-item {
		max-width: 100%;
		min-width: 200rpx;
		height: 64rpx;
		display: -webkit-inline-flex;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: #f7f7f7;
		padding: 0 26rpx;
		box-sizing: border-box;
		border-radius: 32rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		font-size: 26rpx;

	}

	.tui-attr-active {
		background: #fcedea !important;
		color: #e41f19;
		font-weight: bold;
		position: relative;
	}

	.tui-attr-active::after {
		content: '';
		position: absolute;
		border: 1rpx solid #e41f19;
		width: 100%;
		height: 100%;
		border-radius: 40rpx;
		left: 0;
		top: 0;
	}

	.tui-number-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0 30rpx 0;
		box-sizing: border-box;
	}

	/*底部选择弹层*/

	// 内容
	/*内容 部分*/

	.tui-padding {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.tui-ml-auto {
		margin-left: auto;
	}

	/* #ifdef H5 */
	.tui-ptop {
		padding-top: 44px;
	}

	/* #endif */

	.tui-size {
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.tui-gray {
		color: #999;
	}

	.tui-icon-red {
		color: #ff201f;
	}

	.tui-border-radius {
		border-bottom-left-radius: 24rpx;
		border-bottom-right-radius: 24rpx;
		overflow: hidden;
	}

	.tui-radius-all {
		border-radius: 24rpx;
		overflow: hidden;
	}

	.tui-mtop {
		margin-top: 26rpx;
	}

	.tui-pro-detail {
		box-sizing: border-box;
		color: #333;
	}

	.tui-product-title {
		background: #fff;
		padding: 30rpx 0;
	}

	.tui-pro-pricebox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #ff201f;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 44rpx;
	}

	.tui-pro-price {
		display: flex;
		align-items: center;
	}

	.tui-price {
		font-size: 58rpx;
	}

	.tui-original-price {
		font-size: 26rpx;
		line-height: 26rpx;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-line-through {
		text-decoration: line-through;
	}

	.tui-collection {
		color: #333;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		height: 44rpx;
	}

	.tui-scale-collection {
		transform: scale(0.7);
		transform-origin: center 90%;
		line-height: 24rpx;
		font-weight: normal;
		margin-top: 4rpx;
	}

	.tui-pro-titbox {
		font-size: 32rpx;
		font-weight: 500;
		position: relative;
		padding: 0 150rpx 0 30rpx;
		box-sizing: border-box;
	}

	.tui-pro-title {
		padding-top: 20rpx;
	}

	.tui-share-btn {
		display: block;
		background: transparent;
		margin: 0;
		padding: 0;
		border-radius: 0;
		border: 0;
	}

	.tui-share-btn::after {
		border: 0;
	}

	.tui-share-box {
		display: flex;
		align-items: center;
	}

	.tui-share-position {
		position: absolute;
		right: 0;
		top: 30rpx;
	}

	.tui-share-text {
		padding-left: 8rpx;
	}

	.tui-sub-title {
		padding: 20rpx 0;
		line-height: 32rpx;
	}

	.tui-sale-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 30rpx;
	}

	.tui-discount-box {
		background: #fff;
	}

	.tui-list-cell {
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		line-height: 26rpx;
		padding: 36rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-right {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.tui-top40 {
		top: 40rpx !important;
	}

	.tui-bold {
		font-weight: bold;
	}

	.tui-list-cell::after {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 126rpx;
	}

	.tui-last::after {
		border-bottom: 0 !important;
	}

	.tui-flex-center {
		display: flex;
		align-items: center;
	}


	.tui-cell-title {
		width: 90rpx;
		padding-right: 10rpx;
		flex-shrink: 0;
	}

	.tui-promotion-box {
		display: flex;
		align-items: center;
		padding: 10rpx 0;
		width: 80%;
	}

	.tui-promotion-box text {
		width: 70%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-basic-info {
		background: #fff;
	}

	.tui-addr-box {
		width: 76%;
	}

	.tui-addr-item {
		padding: 10rpx;
		line-height: 34rpx;
	}

	.tui-guarantee {
		background: #fdfdfd;
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx 30rpx 30rpx 30rpx;
		font-size: 24rpx;
	}

	.tui-guarantee-item {
		color: #999;
		padding-right: 30rpx;
		padding-top: 10rpx;
	}

	.tui-pl {
		padding-left: 4rpx;
	}

	.tui-cmt-box {
		background: #fff;
	}

	.tui-between {
		justify-content: space-between !important;
	}

	.tui-cmt-all {
		color: #ff201f;
		padding-right: 8rpx;
	}

	.tui-cmt-content {
		font-size: 26rpx;
	}

	.tui-cmt-user {
		display: flex;
		align-items: center;
	}

	.tui-acatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 30rpx;
		display: block;
		margin-right: 16rpx;
	}

	.tui-cmt {
		padding: 14rpx 0;
	}

	.tui-attr {
		font-size: 24rpx;
		color: #999;
		padding: 6rpx 0;
	}

	.tui-cmt-btn {
		padding: 50rpx 0 30rpx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-nomore-box {
		padding-top: 10rpx;
	}

	.tui-product-img {
		display: flex;
		flex-direction: column;
		transform: translateZ(0);
	}

	.tui-product-img image {
		width: 100%;
		display: block;
	}
</style>
